//主组件
const Demo01 = (Comp1, Comp2) => {
	return function(props) {
		const propsIn = {
			...props,
			name: "这是高阶组件"
		};
		return <div className="note-example-box">
			<div className="note-demo-parent-box">
				<Comp1 {...propsIn} />
				<Comp2 {...propsIn} />
			</div>
			<div className="note-code-case">
				<textarea defaultValue={codeVal1} style={{height: '380px'}}></textarea>
				<textarea defaultValue={codeVal2} style={{height: '340px'}}></textarea>
			</div>
		</div>;
    };
}
//子组件-1
const InterCom01 = (props) => {
	const { name } = props;
	return <div className="note-demo-child-box">
		<div>这是高阶组件的[内部组件1]--hooks版</div>
		<div>通过高阶组件属性代理的得到的值为{name}</div>
	</div>
}
//子组件-2
const InterCom02 = (props) => {
	const { name } = props;
	return <div className="note-demo-child-box">
		<div>这是高阶组件的[内部组件2]--hooks版</div>
		<div>通过高阶组件属性代理的得到的值为{name}</div>
	</div>
}

const codeVal1 = `主组件
const Demo01 = (Comp1, Comp2) => {
	return function(props) {
		const propsIn = {
			...props,
			name: "这是高阶组件"
		};
		return <div className="note-example-box">
			<div className="note-demo-parent-box">
				<Comp1 {...propsIn} />
				<Comp2 {...propsIn} />
			</div>
		</div>;
    };
}
export default Demo01(InterCom01, InterCom02)`;
const codeVal2 = `子组件群
const InterCom01 = (props) => {
	const { name } = props;
	return <div className="note-demo-child-box">
		<div>这是高阶组件的[内部组件1]--hooks版</div>
		<div>通过高阶组件属性代理的得到的值为{name}</div>
	</div>
}
const InterCom02 = (props) => {
	const { name } = props;
	return <div className="note-demo-child-box">
		<div>这是高阶组件的[内部组件2]--hooks版</div>
		<div>通过高阶组件属性代理的得到的值为{name}</div>
	</div>
}
`;

export default Demo01(InterCom01, InterCom02)
